<template>
  <el-card shadow="never">
    <xz-table
      :data="tableData"
      :columns="columns"
      @pageChange="onPageChange"
      @selection-change="onSelectionChange"
    >
      <template #dateHeader>
        <el-tag type="success">日期</el-tag>
      </template>
      <template #date="scope"> {{ scope.row.date }}自定义slot</template>
      <template #action="scope">
        <span class="cursor-pointer text-primary" @click="onEdit(scope.row)">编辑</span>
        <el-divider direction="vertical"></el-divider>
        <span class="cursor-pointer text-danger" @click="onDelete(scope.row)">删除</span>
      </template>
    </xz-table>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import XzTable from '@/components/XzTable/index.vue'

interface Table {
  id: number
  date: string
  name: string
  address: string
  class: string
  school: string
}

export default defineComponent({
  name: 'ComponentsTable',
  components: { XzTable },
  setup() {
    const tableData: Table[] = [
      {
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      },
      {
        id: 2,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      },
      {
        id: 3,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      },
      {
        id: 4,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      },
      {
        id: 5,
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      },
      {
        id: 6,
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      },
      {
        id: 7,
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        class: '三年级二班',
        school: '成都市泡桐树小学'
      }
    ]

    const columns = [
      {
        type: 'selection',
        width: 55
      },
      {
        prop: 'date',
        label: '日期',
        fixed: true,
        slot: { body: 'date', header: 'dateHeader' }
      },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      { prop: 'class', label: '班级' },
      { prop: 'school', label: '学校' },
      { prop: '', label: '操作', width: 110, slot: { body: 'action' }, fixed: 'right' }
    ]

    const onEdit = (row: Table) => {
      console.log(row)
    }

    const onDelete = (row: Table) => {
      console.log(row)
    }

    const onPageChange = (options: { key: string; value: number }) => {
      console.log(options)
    }

    let multipleSelection = []

    const onSelectionChange = (value: any) => {
      multipleSelection = value
      console.log(multipleSelection)
    }

    return {
      tableData,
      columns,
      onEdit,
      onDelete,
      onPageChange,
      onSelectionChange
    }
  }
})
</script>
